<template>
	<div class="wrapper">
		<div class='background'>
			<header>
				<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
				<p>兑换中心</p>
			</header>
		</div>
		<div class="myCreditExchange">
			<div class="TotalCredit">
				<div class="TotalNum">
					<h1 style="margin-left:5vw;"><strong>{{TotalCredit}}</strong></h1>
					<div style="font-size: 3vw;color :#838587;margin-top:1vw">
						可用积分总数
						<img style="width: 4vw;height: 4vw;" src="../assets/points.png">
					</div>
				</div>
			</div>
			<ul class="Coupon">
				<li v-for="item in CouponArr">
					<div class="CouponInfo">
						<h3 style="display: flex;justify-content: center;align-items: center;margin-top:3vw;">{{item.couponName}}</h3>
						<p style="display: flex;justify-content: center;align-items: center;font-size:6vw;margin-top:2vw;">&#165;{{item.discount}}</p>
						<p style="display: flex;justify-content: center;align-items: center; color:antiquewhite;padding:1vw;background-color: rgba(255, 255, 255, 0.2);border-radius: 6vw;font-size: 3.5vw;"><strong>{{CreditCoupon[item.couponId-1]}}积分</strong></p>
						<p style="display: flex;justify-content: center;align-items: center;margin-top:3vw;font-size:4vw;">期限：{{item.remark}}</p>
						<button @click="toExchange(item.couponId)" style="background-color:#e94747;color:white;border: none;margin-top:2vw;font-size:4vw;">兑换</button>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyCreditExchange',
		data() {
			return {
				user: {},
				CouponArr: [],
				TotalCredit: 0,
				CreditCoupon: [10, 10, 10, 10, 8, 18, 28, 38, 20, 40],
			};
		},
		created() {
			this.user = this.$getSessionStorage('user');
			let url = `CouponController/listCouponByUserId/${this.user.userId}`;
			this.$axios.get(url)
				.then((response) => {
					this.CouponArr = response.data.result;
					this.togetTotalCredit();
				})
				.catch((error) => {
					console.error(error);
				});
		},
		methods: {
			togetTotalCredit() {
				let url = `CreditController/getTotalCredit/${this.user.userId}`;
				this.$axios.get(url).then((response) => {
						this.TotalCredit = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
			},
			toExchange(couponId) {
				let url = `CouponController/useCoupon/${this.user.userId}/${couponId}`;
				this.$axios.post(url)
					.then((response) => {
						if (response.data.result) {
							this.toconsumeCredit(couponId);
						}
					})
					.catch((error) => {
						console.error(error);
					});
			},
			toconsumeCredit(couponId) {
				const num = this.CreditCoupon[couponId - 1];
				console.log(num);
				let url = `CreditController/consumeCredit/${this.user.userId}/${num}`;
				this.$axios.post(url)
					.then((response) => {
						if (response.data.result) {
							alert('兑换成功');
							this.togetTotalCredit();
						}
					})
					.catch((error) => {
						console.error(error);
					});
			},
			goback() {
				this.$router.go(-1);
			},
		}
	};
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
	}

	.wrapper .background {
		width: 100%;
		height: 40%;
		background: linear-gradient(to bottom, #0097FF, #ffffff);
		border-radius: 15px;
	}

	.wrapper .background header {
		width: 100%;
		height: 12vw;
		/* background-color: #0097FF; */
		display: flex;
		/*justify-content: space-around;*/
		align-items: center;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	.wrapper .myCreditExchange {
		width: 90%;
		height: 100%;
		position: absolute;
		top: 12vw;
		left: 5vw;
	}

	.wrapper .myCreditExchange .TotalCredit {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 15px;
		padding: 4vw 6vw;
		margin-top: 6vw;
	}

	.wrapper .myCreditExchange .Coupon {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 6vw;
	}

	.wrapper .myCreditExchange .CouponInfo {
		width: 150px;
		height: 170px;
		border-radius: 15px;
		background: #e94747;
		color: white;
		margin-top: 4vw;
		//margin-bottom: 2vw;
		padding: 6px;
		display: flex;
		flex-direction: column;
		//justify-content: space-between;
	}
</style>
